<template>
  <div id="app">
  	<v-header :seller="seller"></v-header>
    <div class="tab border-1px">
    	<div class="tab-item">
    		<router-link to="/goods" >商品</router-link>
    	</div>
    	<div class="tab-item">
    		<router-link to="/ratings">评价</router-link>
    	</div>
    	<div class="tab-item">
    		<router-link to="/seller">商家</router-link>
    	</div>
    </div>
      <keep-alive :include="['foods']" :max="5">
        <router-view :seller="seller"></router-view>
      </keep-alive>
  </div>
</template>

<script>
import header from './components/header/header.vue'
import ajax from '@data'
export default {
  name: 'App',
	created(){
		 this.$router.push("/goods");
		 ajax.seller().then((data)=>{
		 	this.seller = data.seller
		 });
  },
  data(){
  	return {
  		seller:{},
  	}
  },
  components:{
  	"v-header":header
  }
}
</script>
<style lang="stylus" rel="stylesheet/styleus">
@import "common/stylus/mixin.styl";
	.tab{
		display:flex
		width:100%;
		height: 40px;
		line-height: 40px;
		border-1px(rgba(7,17,27,0.1));
		.tab-item{
			flex: 1;
			text-align: center;
			& > a{
				display: block;
				font-size: 14px;
				color: rgb(77,85,93);
				&.active{
					color: rgb(240,20,20);
				}
			}
		}
		
	}
</style>
